<template>
	<view>
		<view class="head_main" style="background-image:linear-gradient(to right,#00828A, #4CA7AD);">
			<view style="padding-top:95rpx;padding-left:20rpx;padding-bottom:35rpx;z-index: 999;">
				<u-icon name="https://resourse.cnlhjt.com/upload/20220825/5581891d38f0260ea6dfe08efa051621.png" label="无忧社区" labelColor="#fff" space="6"></u-icon>
				</u-icon>
			</view>
		</view>
		<view style="height:155rpx;"></view>
		<view class="" style="padding-left: 20rpx; padding-right: 20rpx; background-color: #f8f8f8;">
			<view style="height: 30rpx;"></view>
			<u-swiper border-radius="40" style="margin-top: 20rpx; margin-bottom: 20rpx;" @click="intoBanner" indicator
				indicatorMode="dot" :list="bannerList" keyName="image">
			</u-swiper>


			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="title">
						
						<view style="display: flex; ">
							<u-image :src="appTitle.tzgg" width="80" height="30" mode="aspectFit"></u-image>
							<text
								style="color: #999999; font-weight: 400;font-size: 28rpx; line-height: 56rpx;text-align: right; width:100%;"
								@click="moreNotice">更多
								<!-- <u-icon style="display: inline-block !important;" name="arrow-right" color="#999999" size="14"></u-icon> -->
							</text>
						</view>
					</view>
					<view style="background-color:#fff;border-radius: 15rpx;padding:20rpx 0rpx;margin-top:10rpx;overflow: hidden;">
						<view style="padding:20rpx;" v-for="(item,index) in notice" :key="index" @click="detail(item.id)">
							<view class="dis_inl_blo va_m">
								<u-icon name="https://resourse.cnlhjt.com/upload/20220825/7513d671b2b5c928b3bbd12fc6ce46bc.png" color="#008987" size="18"></u-icon>
							</view>
							<text class="va_m overflow dis_inl_blo" style="margin-left:20rpx;color:#333;font-size: 28rpx;width:65%;">{{item.content}}</text>
							<text style="float: right;font-size: 25rpx;color:#999;">{{item.time}}</text>
						</view>
					</view>
					
				</view>
			</view>


			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="title">
						<u-image :src="appTitle.bmfy" width="80" height="30" mode="aspectFit"></u-image></view>
					<view class="user-list" style="background-color: #fff;border-radius: 15rpx;">
						<view class="user-list-cell">
							<view style="width: 100%; height: auto;border-radius: 20rpx; padding-bottom: 20rpx;">
								<u-grid :border="false" col="5">
									<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
										<u-icon :customStyle="{paddingTop:20+'rpx'}"
											@click="service(baseListItem)" :name="baseListItem.icon" size="44"
											style="border-radius: 20rpx;" :label="baseListItem.name" labelPos="bottom"
											labelColor="#363636" space="5" labelSize="13">
										</u-icon>
									</u-grid-item>
								</u-grid>
								<u-toast ref="uToast" />
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="uni-flex-center" style="padding-bottom:20rpx;" v-if="showNews == true">
				<view class="main-service uni-cell-90">
					<view class="title" style="z-index: 10;">
							<u-image :src="appTitle.zlyl" width="80" height="30" mode="aspectFit"></u-image>
					</view>
					<view style="background-color: #fff;border-radius: 15rpx;margin-top:10rpx;">
						<u-sticky offset-top="66">
							<view style="background-color: #fff;">
								<u-tabs :list="list1" lineColor="#0e8188" lineWidth="30" :activeStyle="activeStyle" @click="newsTab"></u-tabs>
							</view>
						
						</u-sticky>
						
						<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
						<view class="user-list" style="border-top:1rpx solid #eee;margin-top:5rpx;">
							<view class="">
								<view class="u-flex u-row-between new_list"  @click="newsDetail(item)" v-for="(item, index) in news" :key="index">
									
									<view class="u-rela" style="height:100%;width:70%;padding-right:20rpx;">
										<view class="title_con">{{item.title}}</view>
										<view style="margin-top:10rpx;">
											<!-- <u-parse :html="item.label" :tag-style="style"></u-parse> -->
											<!-- <rich-text style="font-size: 24rpx; color: #666666;" :nodes="item.label"></rich-text> -->
										</view>
										<view class="u-abso" style="bottom:0rpx;font-size: 24rpx;color:#666;width:100%;">
											<text style="margin-right:15rpx;">{{item.author}}</text>
											<text>{{item.time}}</text>
											<view class="u-abso" style="right:20rpx;top:0;">
												<view class="dis_inl_blo" style="font-size: 26;color:#666;margin-left:30rpx;" @click.stop="like(item.id,index)">{{item.like}}
													<view class="dis_inl_blo"><u-icon :name="item.likeIcon" :color="item.likeColor" size="18"></u-icon></view>
												</view>
												<view class="dis_inl_blo" style="font-size: 26;color:#666;margin-left:20rpx;">{{item.comment}}
													<view class="dis_inl_blo">
														<u-icon name="chat" color="#666" size="17"></u-icon>
													</view>
												</view>
											</view>
										</view>
									</view>
									<image :src="item.image" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getBanner,
		getFreeService,
		newsConfig,
		getNewsType
	} from "@/service/configService.js";
	import {
		getNoticeList
	} from "@/service/noticeService.js";
	import {
		getNews,newsLike
	} from "@/service/communitService.js";
	export default {
		data() {
			return {
				appTitle: this.$store.state.appTitle,
				showEmpty: false,
				baseList: [],
				bannerList: [],
				notice: [],
				news: [],
				list1: [{
					id:0,
					name: '全部',
				}],
				activeStyle:{
					fontWeight:'bold'
				},
				showNews: false,
				style: {
					// 字符串的形式
					p: 'font-size: 24rpx; color: #666666;text-align:left;',
				},
				
				likeIcon:'thumb-up',
				likeColor:'#666'
			}
		},
		mounted() {
			getBanner({
				type: 4
			}).then(this.getBannerCommunity);
			getFreeService().then(this.getFreeService);
			getNoticeList({
				page:1,limit:3
			}).then(this.getNotice);
			getNews().then(this.getNews);
			newsConfig().then(this.newsConfig);
			getNewsType().then(this.getNewsType);
		},
		methods: {
			newsConfig(e){
				if(e.code == 200){
					this.showNews = true;
				}else{
					this.showNews = false;
				}
			},
			getNewsType(e){
				if(e.code==200){
					for(var i=0;i<e.result.length;i++){
						this.list1.push(e.result[i])
					}
				}
			},
			detail(id){
				this.$u.route({
					url: '/pagesHome/index/notice',
					params: {
						id: id
					}
				})
			},
			service(e){
				uni.navigateTo({
					url:'/pagesHome/service/index?item='+JSON.stringify(e)
				})
			},
			getBannerCommunity(e) {
				if (e.code == 200) {
					this.bannerList = e.result;
				}
			},
			getFreeService(e) {
				if (e.code == 200) {
					this.baseList = e.result;
				}
			},
			getNotice(e) {
				if (e.code == 200) {
					this.notice = e.result;
				}
			},
			moreNotice(){
				uni.navigateTo({
					url:'/pagesHome/notice/notice'
				})
			},
			getNews(e) {
				this.news.splice(0);
				if (e.code == 200) {
					this.showEmpty = false;
					// this.news = e.result;
					for(var i=0;i<e.result.length;i++){
						e.result[i].likeColor="#666";
						e.result[i].likeIcon="thumb-up";
						this.news.push(e.result[i])
					}
				} else {
					this.showEmpty = true;
				}
			},
			like(id,index) {
				newsLike({
					gid: id
				}).then(res => {
					this.news[index].likeColor='red',
					this.news[index].likeIcon='thumb-up-fill'
					if (res.code == 200) {
						this.news[index].like += 1;
						this.$refs.uToast.show({
			
							type: 'success',
							title: '成功',
							message: res.msg
						})
						
					} else {
						this.$refs.uToast.show({
			
							type: 'error',
							title: '失败',
							message: res.msg
						})
					}
				});
			},
			newsTab(item) {
				if(item.id > 0){
					getNews({
						type: item.id
					}).then(this.getNews);
				}else{
					getNews().then(this.getNews);
				}
			},
			intoBanner(index) {
				let id = this.bannerList[index].id;
				this.$u.route({
					url: '/pagesHome/index/article',
					params: {
						id: id
					}
				})
			},
			newsDetail(item) {
				this.$u.route({
					url: '/pagesHome/index/news',
					params: {
						id: item.id
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color:#f8f8f8;
	}
	.head_main{
		position: fixed;
		top:0;
		left:0;
		width:100%;
		z-index:999;
	}
	.main-service{
		background-color:transparent;
		box-shadow:none;
	}
	.main-service .title{
		padding-left:0;
		/* background-image: none; */
		background-position: 0% 85%;
	}
	.new_list{
		padding:20rpx;
		height:220rpx;
		border-bottom:1rpx solid #eee;
	}
	.new_list:last-child{
		border:none;
	}
	.new_list image{
		width:250rpx;
		height:200rpx;
		border-radius: 15rpx;
	}
	.title_con{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
